<html>
<head>
<meta http-equiv=MSThemeCompatible Content=Yes>
<meta http-equiv=Content-Type Content="text-html; charset=utf-8">
<hta:application
id=CI_VIEW
applicationName=CI_Viewer
maximizeButton=no
border=dialog
innerBorder=yes
borderStyle=raised
scroll=no
selection=no
contextMenu=no
caption=no
showInTaskBar=no
singleinstance=yes
version=2.2
>
<title>CI Viewer</title>
<style type="text/css">
	body, table {margin:0;}
	table       {width:100%; height:100%;}
	td          {text-align:center;}
</style>
<script language="JavaScript">
// ---------------------------------------------
var view_width  = 128; // размеры окна приложения
var view_height = 128;
var dwell_period = 50;        // интервал опроса эвентом OnDwellStart положения мыши
var check_props_timeout = 50; // интервал опроса переменных SciTE из этого скрипта

// ---------------------------------------------
// Инициализация SciTE.Helper
try {
	var SciTE=new ActiveXObject("SciTE.Helper");
} catch(e) {
	alert("Please install SciTE Helper before!");
	self.close();
}

// Обработка события удачной загрузки картинки (т.е. события onload объекта Picture)
function ShowImage() {
		self.ImageView.style.display = "inline";
		self.HelpView.style.display = "none";
		self.ColorView.style.display = "none";
		self.Picture.style.width = "";
		self.Picture.style.height = "";
		var img_width = self.Picture.clientWidth;
		var img_height = self.Picture.clientHeight;
		self.ImageInfo.innerHTML = img_width + " x " + img_height;
		var width_max = view_width - 6;
		var height_max = view_height - 20;
		if (img_width > width_max) {self.Picture.style.width = width_max;}
		if (img_height > height_max) {self.Picture.style.height = height_max;}
}

// Попытка текущее слово подставить как параметр цвета
function ShowColor() {
	var color_val = SciTE.Props("civiewer.word");
	if (color_val.length > 2) {
		try {
			self.Color_fore.style.color=color_val;
			self.Color_bg.style.backgroundColor=color_val;
			self.ColorView.style.display = "inline";
			self.HelpView.style.display = "none";
			self.ImageView.style.display = "none";
			return true;
		} catch(e) {
			return false;
		}
	}
	return false;
}

var current_pos_old;

// Опрос параметров SciTE и попытка их отобразить
function Show() {
	var current_pos = SciTE.Props("civiewer.pos");
	if (current_pos != current_pos_old) {
		current_pos_old = current_pos;
		// пробуем отобразить цвет
		if (!ShowColor()) {
			// не удалось - отображаем подсказку
			self.HelpView.style.display = "inline";
			self.ColorView.style.display = "none";
			self.ImageView.style.display = "none";

			// пробуем загрузить картинку
			var image_src = SciTE.Props("civiewer.uri");
			if (image_src.length > 4) {
				self.Picture.src = SciTE.Props("FileDir").replace(/\\/g,'/') + '/' + image_src;
				// если получится, то эвент onload объекта Picture запустит процедуру ShowImage()
			}
		}
	}
	// запускаем заново эту процедуру через указанное время
	setTimeout(Show, check_props_timeout);
}
</script>
</head>
<body onLoad="SciTE.onTop(document.title, true);">
<div id="HelpView">
	<table style="font:10px Arial;">
		<tr><td>
			Переместите курсор<br>
			на параметр цвета<br>
			("<font color="#6495ED">#6495ED</font>" или "<font color="red">red</font>")<br>
			или на ссылку с изображением ("<a href="#">bg.gif</a>")
			<hr size="1">
			Клик <b>левой</b> кнопкой закроет приложение.<br>
			<b>Правая</b> - перемещение.
		</td></tr>
	</table>
</div>

<div id="ColorView" style="display:none;">
	<table cellpadding="0" cellspacing="0" style="font-family:Verdana;">
		<tr style="height:50%"><td id="Color_fore">
			<div style="font-size:14px">Color <b>string</b></div>
			<div style="font-size:12px">Color <b>string</b></div>
			<div style="font-size:10px">Color <b>string</b></div>
		</td></tr>
		<tr style="height:50%"><td id="Color_bg">
			<div style="font-size:14px">Color <b>string</b></div>
			<div style="font-size:12px">Color <b>string</b></div>
			<div style="font-size:10px">Color <b>string</b></div>
		</td></tr>
	</table>
</div>

<div id="ImageView" style="display:none;">
	<table cellpadding="0" cellspacing="0">
		<tr style="height:100%"><td>
			<img id="Picture" onload="ShowImage();">
		</td></tr>
		<tr style="height:12px"><td>
			<div id="ImageInfo" style="font:10px Verdana;"></div>
		</td></tr>
	</table>
</div>

</body>
<script language="JavaScript">
// Инициализация окна приложения
window.resizeTo(view_width, view_height);
window.moveTo(SciTE.Left + SciTE.Width - view_width - 5, SciTE.Top + 25);
Show();
SciTE.Focus();
// Запуск в SciTE эвента OnDwellStart, отслеживающего положение курсора
SciTE.Props("dwell.period") = dwell_period;
SciTE.LUA("scite.SendEditor(SCI_SETMOUSEDWELLTIME, " + dwell_period + ")");

// Изменение вида курсора при перетаскивании
function cursor(c){
	for (var i in document.all) {
		try {document.all[i].style.cursor=c;} catch(e) {}
	}
}

// Процедуры для закрытия и перемещения окна приложения
var x0, y0;

function WindowDragHandler() {
	if (event.button!=1){
		window.moveBy(event.x-x0, event.y-y0);
	}
}

document.onmousedown=function () {
	if (event.button!=1){
		// Если нажата не левая кнопка - перемещение окна
		x0=event.x; y0=event.y;
		document.onmousemove=WindowDragHandler;
		cursor("move");
	}else{
		// Если нажата левая кнопка - закрытие окна
		// Отключаем в SciTE процедуру OnDwellStart
		SciTE.Props("dwell.period")="";
		SciTE.LUA("scite.SendEditor(SCI_SETMOUSEDWELLTIME, SC_TIME_FOREVER)");
		self.close();
	}
};

document.onmouseup=function () {
	document.onmousemove=null;
	cursor("auto");
};

document.mouseout=function () {
	document.onmousemove=null;
	cursor("auto");
};
</script>
</html>